چگونه یک جدول اطلاعات ساده اما بسیار حرفه ای ایجاد کنیم؟





در این نوشته می خواهیم کمی در مورد Css و Table ها صحبت کنیم. اکثر طراحان وب می دانند که این روز ها متد های طراحی در حال تغییر است و طرح های حرفه ای محسوب می شوند که در ساختار آنها تا آنجا که امکان دارد از Table کمتر استفاده شده باشد و یا در اصطلاح Table less باشند.
شاید پیاده سازی بسیار از موارد مورد نیاز در یک طراح با استفاده از دیگر عناصر XHTML بسیار ساده تر از استفاده از Table ها باشد اما در برخی مواقع هیچ راه گریزی نیست.
یکی از خواسته های که پیاده سازی آن با Table می تواند راحت ترین راه ممکن باشد ، نمایش جداول اطلاعاتی است که در برخی از کارها نیاز به استفاده از آنها می شود. در برخی از این موارد ، کاربران و یا طراحان فکر می کنند که استفاده Table نمی تواند آنگونه که می خواهند طرح را نمایش دهد به عبارت دیگر فکر می کنند که Table ها زیاد انعطاف پذیر نیستند.
اما با استفاده از Css می توان به عناصر Table نیز ظاهری متعارف داد تا هم حجم کمتری را به خود اختصاص دهند و هم بهتر نمایش داده شوند. اکنون می خواهیم یک نمونه جدول را با استفاده از Css پیاده سازی کنیم و ظاهری متناسب به آن دهیم.
به سراغ طرح خود برویم، می خواهیم جدولی از اطلاعات مورد نظر شبیه چیزی که در تصویر می بینید ایجاد کنیم. ابتدا عناصر xhtml را پیاده سازی می کنیم.

در ویرایشگر خود یک پرونده جدید xhtml ایجاد کنید و کد های زیر را در بدنه صفحه قرار دهید. دقت کنید نوع قرار گیری کد های زیر برای نمایش صحیح تر طرح نهایی بسیار مهم هستند.

بخش XHTML

<table cellpadding="0" summary="لیست اجناس شرکت..." dir="rtl">
<colgroup>
<col id="idCol" />
<col />
<col />
<col />
<col />
</colgroup>
<thead>
<tr>
<th>ID</th>
<th>نام</th>
<th>بخش</th>
<th>قیمت</th>
<th>وضعیت</th>
</tr>
</thead>
<tbody>
<tr>
<td>19</td>
<td>دوربین دیجیتال</td>
<td>الکترونیک</td>
<td>$250</td>
<td>موجود</td>
</tr>
<tr>
<td>25</td>
<td>گوشی موبایل</td>
<td>الکترونیک</td>
<td>$600</td>
<td>موجود</td>
</tr>
<tr>
<td>37</td>
<td>Mp3 پلیر</td>
<td>الکترونیک</td>
<td>$75</td>
<td>وجود ندارد</td>
</tr>
<tr>
<td>78</td>
<td>پلی استیشن 3</td>
<td>بازی</td>
<td>$550</td>
<td>موجود</td>
</tr>
</tbody>
</table>

بخش Css

در ادامه به بخش Css می رسم ، اکنون می خواهیم نمای بهتری به Table خود بدهیم. ابتدا یک شکل ساده برای جدول خود در نظر می گیریم ، Css مورد نظر می تواند چیزی شبیه این باشد:

table {
        border: #ccc 1px solid;
        border-collapse: collapse;
        font-family: Tahoma, Helvetica, sans-serif;
        font-size: 0.7em;
        height: 60px;
        text-align: right;
}
col {
        border-right: #ccc 1px solid;
}
col#idCol {
        width: 45px;
}


بعد از انجام این کار زمان آن می رسد که طرح مورد نظر را برای جدول خود پیاده سازی کنیم:

th {
        border-right: #ccc 1px solid;
        font-size: 1em;
        height: 25px;
        text-align: right;
        padding: 0px 4px 0px 60px;
}
tbody tr {
        border-bottom: #eee 1px solid;
        font-size: .9em;
        line-height: 1.8em;
}
tbody tr:hover {
        background: #f1f1f1
}
td {
        padding: 0 4px 0 4px;
}


اکنون جدول ما نمای خیلی بهتری نسبت به قبل پیدا کرده است ، اما اگر بخواهیم نمای جالبتری به آن بدهیم می توانید برای عناوین ستون ها از تصویر بک گراند استفاده کنیم.

th {
        background: #e6e2d9 url("thbackground.jpg") bottom left repeat-x;
        border-right: #ccc 1px solid;
        font-size: 1em;
        height: 25px;
        text-align: left;
        padding-right: 4px;
}

thead th:hover {
        background: url("thbackgroundhover.jpg") bottom left repeat-x;
}


توجه کنید که مشخصه hover عناصر در IE6 قابل اجرا نیست ، منتها می توانید با استفاده از jQuery این مشکل را نیز به سادگی حل کنید که به خودتان می سپارم حل آن را.
منبع:http://ipooya.com
/خ